<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>新闻发布系统</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            font-family:"Microsoft YaHei", "微软雅黑", "consolas";
            background: url(新闻背景.jpeg) ;
            background-size: 100%;
        }
        a {
            text-decoration: none;
            color: #000;
        }

        .clearfix {
            *zoom: 1;
        }
        .clearfix:before, .clearfix:after {
            display: table;
            line-height: 0;
            content: "";
        }
        .clearfix:after {
            clear: both;
        }


        .container {
            width: 1000px;
            margin: 0 auto;
        }
        .navbar .navbar-content a {
            color: #FFF;
            line-height: 54px;
            display: inline-block;
            width: 100px;
            text-align: center;
        }
        .navbar .navbar-content a:hover {
            color: #CCC;
        }

        .index-bg {
            width: 100%;
            height: 500px;

            position: absolute;
            top: -50px;
            z-index: -10;
        }

        .news-list {
            margin: 50px 0;
            background-color: #FFF;
            border-radius: 5px;
            border: 1px solid #DDD;
            padding: 30px 20px;

            min-height: 300px;
        }
        .news-list:hover {
            box-shadow: 0 0 5px 3px #CCC;
        }

        .about .about-des {
            border-left: 5px solid #CCC;
            margin-top: 15px;
        }

        .about .about-des p {
            padding-left: 10px;
            line-height: 28px;
            text-indent: 2em;
        }

        .news-list-left {
            float: left;
            width: 729px;
            margin-bottom: 50px;
        }

        .news-list-right {
            float: right;
            width: 229px;
        }

        .news-list-item {
            padding: 20px 30px;
        }

        .author-time {
            font-size: 14px;
        }
        .news-des {
            padding-bottom: 20px;
            border-bottom: 2px solid #CCC;
        }
        .news-title {
            font-size: 23px;
        }
        .news-title i {
            display: inline-block;
            width: 47px;
            height: 43px;
            margin-right: 10px;
            background: url(新闻图标.jpg) left center no-repeat;
            vertical-align: middle;
        }
        .news-title a {
            color: green;
        }
        .news-title a:hover {
            text-decoration: underline;
        }
        .news-content-des {
            line-height: 28px;
        }

        .copyright {
            clear: both;
            text-align: center;
            color: gray;

            border-top: 2px solid #CCC;
            margin-top: 50px;
            padding: 20px 0;
        }

    </style>


</head>
<body>
<nav class="navbar">
    <div class="container navbar-content">
        <a href="#"></a>
        <a href="#"></a>
    </div><!-- /.container-fluid -->
</nav>


<div class="container" id="newShow">
    <h1 style="color: orange">新闻发布系统</h1>
    <h4></h4>

    <div class="news-list">
        <div class="news-list-left" v-for="n in news1">
            <div class="news-list-item">
                <div class="author-time">
                    发表于 <span v-text="n.created">2014-07-20 18:07:10</span>
                </div>
                <div class="news-des">
                    <h3 class="news-title"><i></i><a href="#" v-text="n.title"></a></h3>
                    <div class="news-content-des" >
                        {{n.comtent}}
                    </div>
                </div>
            </div>
        </div>

        <div class="news-list-right">
            <div class="about">
                <h4>新闻简介</h4>
                <div class="about-des">
                   <!--<p>本系统使用了pengcheng的微型框架。该微型框架基于MVC框架模式研发，融合了工厂设计模式、注册模式等设计概念，帮助学员快速掌握MVC理论，提升面向对象技能，培养程序设计思想打下坚实基础。</p>-->
                    <p>{{content}}</p>
                </div>
            </div>
        </div>

        <footer class="copyright">
            版本所有权为:<br>
            沈阳月初不加班责任有限公司<br>
            所有®
        </footer>
    </div>
</div>
<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
<script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
<!--引入vue-->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<!--引入axios-->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="http://cdn.staticfile.org/moment.js/2.24.0/moment.js"></script>

<script>
    let news = new Vue({
        el:"#newShow",
        data:{news1:[],content:""},
        methods:{},
        created:function () {
             let kw = location.search.split("=")[1]
            if (kw==""){
                alert("输入查询字段")
                location.href="/index.html"
            }
            axios.get("/news/selectByLike?kw="+kw).then(function (response) {
                news.news1=response.data
                for(let nn of news.news1){
                    nn.created=moment(nn.created).format("YYYY年MM月DD日 HH时mm分ss秒")
                    news.content=nn.intro
                }
                    /*news.news1[i].created=moment(news.news1[i].created).format("YYYY年MM月DD日")*/


            })
        }
    })
</script>
</body>

</html>
